<!-- 左侧菜单 -->
<template>
  <div class="left-menu">
    <div class="app-title">
      <span class="big-text">会员</span>
      <span>积分系统</span>
    </div>
    <div class="login-info">
      <!-- 头像 -->
      <div class="avatar">
        <img src="https://img2.woyaogexing.com/2022/10/13/291c4aa65d68a9ec!400x400.jpg" />
      </div>
      <div class="nickname">小甜甜</div>
      <div class="logout">退出</div>
    </div>
    <Menu :menus="menus" />
  </div>
</template>
<script setup lang="ts">
import Menu from "./Menu.vue";
const menus = [
  //http://127.0.0.1:3333/assets/circle.svg
  {
    icon: `<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M896 602.208 896 424.96c39.328-37.888 63.968-90.944 63.968-149.728 0-114.688-93.312-208-208-208-57.216 0-109.088 23.232-146.752 60.736l-183.424 0c-37.888-39.328-90.912-63.936-149.696-63.936-114.688 0-208 93.312-208 208 0 58.752 24.608 111.808 63.904 149.664l0 180.576c-39.328 37.888-63.904 90.912-63.904 149.664 0 114.688 93.312 208 208 208 58.752 0 111.808-24.64 149.696-63.936l180.512 0c37.888 39.328 90.912 63.936 149.696 63.936 114.688 0 208-93.312 208-208C959.968 693.152 935.328 640.096 896 602.208zM751.968 131.264c79.392 0 144 64.608 144 144s-64.608 144-144 144-144-64.608-144-144S672.576 131.264 751.968 131.264zM272.096 128.064c79.392 0 144 64.608 144 144s-64.608 144-144 144-144-64.608-144-144S192.672 128.064 272.096 128.064zM272.096 895.936c-79.392 0-144-64.608-144-144s64.608-144 144-144 144 64.608 144 144S351.488 895.936 272.096 895.936zM464.032 832c10.304-24.672 16.064-51.68 16.064-80.064 0-114.688-93.312-208-208-208-28.384 0-55.424 5.76-80.096 16.096L192 464c24.672 10.336 51.712 16.064 80.096 16.064 114.688 0 208-93.312 208-208 0-28.352-5.76-55.392-16.064-80.064l97.44 0c-11.2 25.504-17.504 53.632-17.504 83.264 0 114.688 93.312 208 208 208 28.352 0 55.36-5.76 80.032-16.064l0 92.8c-24.672-10.304-51.68-16.064-80.032-16.064-114.688 0-208 93.312-208 208 0 28.384 5.76 55.392 16.064 80.064L464.032 832zM751.968 895.936c-79.392 0-144-64.608-144-144s64.608-144 144-144 144 64.608 144 144S831.36 895.936 751.968 895.936z" />
</svg>`,
    title: "管理中心",
    isSvg: true,
  },
  {
    icon: `<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M468 128H160c-17.7 0-32 14.3-32 32v308c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V136c0-4.4-3.6-8-8-8z m-56 284H192V192h220v220zM274 338h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM468 548H136c-4.4 0-8 3.6-8 8v308c0 17.7 14.3 32 32 32h308c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8z m-56 284H192V612h220v220zM274 758h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM864 128H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h332c4.4 0 8-3.6 8-8V160c0-17.7-14.3-32-32-32z m-32 284H612V192h220v220zM694 338h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM888 548h-48c-4.4 0-8 3.6-8 8v134h-78V556c0-4.4-3.6-8-8-8H556c-4.4 0-8 3.6-8 8v332c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V644h78v102c0 4.4 3.6 8 8 8h190c4.4 0 8-3.6 8-8V556c0-4.4-3.6-8-8-8zM746 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM888 832h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" />
</svg>`,
    title: "二维码管理",
    isSvg: true,
  },
  {
    icon: `<svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M837.92 96a64 64 0 0 1 55.264 31.744l108.672 186.336a64 64 0 0 1-5.28 72.224l-409.6 512a96 96 0 0 1-149.952 0l-409.6-512a64 64 0 0 1-5.28-72.224l108.672-186.336A64 64 0 0 1 186.08 96h651.84z m-204.992 388.096l-107.904 151.104a16 16 0 0 1-26.048 0l-107.904-151.104a48 48 0 1 0-78.144 55.808l107.936 151.072a112 112 0 0 0 182.272 0l107.936-151.072a48 48 0 1 0-78.144-55.808z" />
</svg>`,
    title: "会员管理",
    isSvg: true,
  },
  {
    icon: `<svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M793.858 232.122L742.33 108.698c-17.243-45.917-46.087-54.183-80.238-42.204L256.98 232.122h536.878zM976.737 695.382H755.89c-45.157 0-81.763-36.607-81.763-81.764v-98.117c0-45.157 36.606-81.763 81.763-81.763h220.786V232.122c0-68.214-45.147-130.048-112.87-130.048l16.5 87.845c9.569 3.188 19.383 13.004 19.383 26.01l0.146 38.77c0 13.004-9.962 19.629-22.72 19.629H134.122c-12.76 0-19.139-3.19-19.139-19.63v-38.771c0-13.005 6.379-19.63 19.14-19.63h74.103l167.345-94.223h-199.49c-67.478 0-128.822 65.024-128.822 133.238v600.516c0 68.214 54.964 126.612 122.197 126.612h678.705c67.722 0 128.576-61.834 128.576-130.048v-129.4l-0.001-7.61zM800.047 480.834c-28.9 0-52.33 23.428-52.33 52.328v62.794c0 28.9 23.43 52.328 52.33 52.328H923.86c28.9 0 52.33-23.428 52.33-52.328v-62.794c0-28.9-23.43-52.328-52.33-52.328H800.047z m9.177 116.416c-18.053 0-32.689-14.636-32.689-32.69s14.636-32.69 32.689-32.69c18.055 0 32.69 14.636 32.69 32.69s-14.635 32.69-32.69 32.69z" />
</svg>`,
    title: "提现管理",
    isSvg: true,
  },
];
</script>
<style lang="less">
.left-menu {
  background-color: #282f36;
  width: var(--left-menu-width);
  height: 100%;
  color: var(--primary-color);
  text-align: center;
}

.app-title {
  padding: 20px 0;
}

.big-text {
  font-size: 24px;
  margin-right: 4px;
}

.login-info {
  background-color: #242a31;
  padding: 40px 0;
}

.avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>